<!-- 分红记录   -->
<template>
    <div class="bonus_records">
      <van-nav-bar
        title="分红记录"
        left-arrow
        @click-left="$router.back()"
        left-text="返回"
      />
      <div class="header_title">
        <div>累计分红</div>
        <div style="margin-top: 6px">￥<span>{{needBonusData ? (needBonusData*1).toFixed(3) : '暂无分红'}}</span><span>元</span></div>
      </div>
      <div v-if="bonusList.length">
        <van-cell>
          <van-row style="text-align: center; vertical-align: center" align="center" type="flex" justify="space-between">
            <van-col span="6">时间</van-col>
            <van-col span="6">每股分红(￥)</van-col>
            <van-col span="6">分红数量</van-col>
            <van-col span="6">合计</van-col>
          </van-row>
        </van-cell>
        <van-cell  v-for="item in bonusList" :key="item.id" style="font-size: 12px">
          <van-row type="flex" style="text-align:center" align="center" justify="space-between">
            <van-col span="6">{{item.bonus_time}}</van-col>
            <van-col span="6">{{item.pjfh}}</van-col>
            <van-col span="6">{{item.canbonusing}}</van-col>
            <van-col span="6">{{item.bonus_amount}}</van-col>
          </van-row>
        </van-cell>
        <van-pagination
          v-model="pageIndex"
          style="margin-top: 3px"
          :total-items="totalRecord"
          :items-per-page="pageSize"
          force-ellipses
          @change="handleChange"
        />
      </div>

      <van-divider style="margin-top: 160px" v-else>暂无分红记录</van-divider>
    </div>
</template>

<script>
  export default {
    name: 'bonusRecords',
    data(){
      return {
        needBonusData: '',
        stockId: '',
        bonusList: [],
        pageIndex: 1,
        pageSize: 20,
        totalRecord: 0,
      }
    },

    created() {
      // 股份的id
      const stockId = JSON.parse(localStorage.getItem('stockItem')).id
      if (stockId){
        this.stockId = stockId
      }

      // 传递的参数
      const needBonusData = this.$route.params.needBonusData || localStorage.getItem('needBonusData')
      // 若有needBonusData, 则保存
      if (needBonusData) {
        if (this.$route.params.needBonusData) {
          localStorage.setItem('needBonusData', needBonusData)
        }
        this.needBonusData = localStorage.getItem('needBonusData')
      } else {
        this.$router.push('/groupStock/stockMarket')
        localStorage.removeItem('needBonusData')
      }
    },

    mounted() {
      if (this.stockId){
        // 初始化
        const params = {
          id: this.stockId,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        }
        // 封装函数
        this._getBonusRecordList(params)
      }
    },

    methods: {
      _getBonusRecordList(params){
        this.$api.stock.reqBonusList(params).then(res =>{
          if(res.code===200){
            this.bonusList = res.data.items
            this.totalRecord = res.data.total || res.data.count || 0
          }
        })
      },

      handleChange(value) {
        const params = {
          id: this.stockId,
          pageIndex: value,
          pageSize: this.pageSize,
        };

        this._getBonusRecordList(params)
      },

    },
  }
</script>

<style lang="scss" scoped>
  .bonus_records{
    width: 100%;
    .header_title{
      height: 100px;
      width:150px;
      border-radius: 50%;
      color: #fff;
      background-color:#0099FF;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 30px auto;
    }
  }
</style>
